<template>
  <view>
    <UgoSearch></UgoSearch>
    <u-tabs
      :list="list"
      :is-scroll="false"
      :current="current"
      @change="change"
      active-color="#ea4350"
      bar-width="150"
    ></u-tabs>
    <view v-if="current === 0" class="goods_list">
      <navigator
        v-for="item in goods"
        :key="item.goods_id"
        :url="`/pages/goods_detail/goods_detail?goods_id=${item.goods_id}`"
      >
        <view class="goods_img_wrap">
          <u-image
            :src="item.goods_small_logo"
            width="191"
            height="191"
          ></u-image>
        </view>
        <view class="goods_info_wrap">
          <view class="goods_name u-line-2">{{ item.goods_name }}</view>
          <view class="goods_price">{{ item.goods_price }}</view>
        </view>
      </navigator>
    </view>
    <view v-if="current === 1">销量</view>
    <view v-if="current === 2">价格</view>
  </view>
</template>

<script>
export default {
  onLoad(options) {
    // 定义一个全局的变量
    this.params = {
      query: "",
      cid: "",
      pagenum: 1,
      pagesize: 10,
    };
    // 判断一下  如果 options.cid  有值   使用cid 获取商品列表数据
    if (option.cid) {
      this.params.cid = options.cid;
    }
    // 判断一下  如果 options.query 有值  使用 query获取商品列表数据
    if (options.query) {
      this.params.query = options.query;
    }
    this.getGoodsList();
  },
  onReachBottom() {
    if (this.goods.length < this.total) {
      // 就是总条数多于当前的商品数量才能上拉
      // 加载下一页
      this.params.pagenum++;
      // 发送请求
      this.getGoodsList();
    } else {
      uni.showToast({
        title: "没有数据了哦!",
        icon: "none",
      });
    }
  },
  async onPullDownRefresh() {
    // console.log('下拉刷新了');
    (this.pagenum = 1), (this.goods = []), await this.getGoodsList();
    wx.stopPullDownRefresh();
  },
  data() {
    return {
      list: [
        {
          name: "综合",
        },
        {
          name: "销量",
        },
        {
          name: "价格",
        },
      ],
      current: 0,
      goods: [],
    };
  },
  methods: {
    change(index) {
      this.current = index;
    },
    // 获取商品列表
    async getGoodsList() {
      const result = await this.$u.get("/goods/search", this.params);
      // console.log(result);
      this.goods = [...this.goods, ...result.message.goods];
      // console.log(this.goods);
      //全局变量 总条数(不需要声明)
      this.total = result.message.total;
    },
  },
};
</script>

<style lang="scss">
.goods_list {
  navigator {
    display: flex;
    // margin-top: 10rpx;
    .goods_img_wrap {
      flex: 1;
      padding: 15rpx;
    }
    .goods_info_wrap {
      display: flex;
      flex: 2;
      padding: 15rpx;
      flex-direction: column;
      justify-content: space-between;
      .goods_name {
      }
      .goods_price {
        color: red;
        font-size: 30rpx;
      }
    }
  }
}
</style>